<!doctype html>
<html lang="en">
<head>
    <title>Grid - Custom Data Parsers</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var customBoolParser = {
                // dom -> boolean
                parseDOM: function (value, culture, format, nullString) {
                    return this.parse(value, culture, format, nullString);
                },

                // string/ boolean -> boolean
                parse: function (value, culture, format, nullString) {
                    if (typeof (value) === "boolean") {
                        return value;
                    }

                    if (typeof (value) === "string") {
                        value = $.trim(value);
                    }

                    if (!value || value === "&nbsp;" || value === nullString) {
                        return null;
                    }

                    switch ($.trim(value.toLowerCase())) {
                        case "off": return false;
                        case "on": return true;
                    }

                    return NaN;
                },

                // boolan -> string
                toStr: function (value, culture, format, nullString) {
                    return value ? "on" : "off";
                }
            };
            
            $("#demo").wijgrid({
                allowSorting: true,
                columns: [
                    {},
                    { dataType: "boolean", dataParser: customBoolParser },
                    { dataType: "number", dataFormatString: "n0" },
                    { dataType: "number", dataParser: customRomanParser }
                ]
            });
        });

        function customRomanParser() {
            // DOM -> number
            this.parseDOM = function (value, culture, format, nullString) {
                return this.parse(value.innerHTML);
            },

            // string/ number -> number
            this.parse = function (value, culture, format, nullString) {
                if (typeof (value) === "number" && (value === 0 || isNaN(value))) {
                    return NaN;
                }

                if (!value || (value === "&nbsp;") || (value === nullString)) {
                    return null;
                }

                if (!isNaN(value)) {
                    return parseInt(value);
                }

                value = roman(value);
                return !value ? NaN : value;
            },

            // number -> string
            this.toStr = function (value, culture, format, nullString) {
                if (value === null) {
                    return nullString;
                }

                return roman(value);
            };

            var arab_nums = [1, 4, 5, 9, 10, 40, 50, 90, 100, 400, 500, 900, 1000];
            var roman_nums = ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'XC', 'C', 'CD', 'D', 'CM', 'M'];

            function roman(value) {
                if (typeof (value) === "number") {
                    return (function (arab) {
                        var roman = "";

                        for (var i = 12; arab > 0; ) {
                            if (arab >= arab_nums[i]) {
                                roman += roman_nums[i];
                                arab -= arab_nums[i];
                            } else {
                                i--;
                            }
                        }

                        return roman;

                    })(value);
                }
                else {
                    return (function (roman) {
                        roman = roman.toUpperCase();

                        var arab = 0;
                        for (var i = 12, pos = 0, len = roman.length; i >= 0 && pos < len; ) {
                            if (roman.substr(pos, roman_nums[i].length) === roman_nums[i]) {
                                arab += arab_nums[i];
                                pos += roman_nums[i].length;
                            }
                            else {
                                i--;
                            }
                        }

                        return arab;
                    })(value);
                }
            }
        }
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Custom Data Parsers</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table id="demo">
               <thead>
                  <tr>
                     <th>Boolean</th><th>Boolean Parsed</th><th>Number</th><th>Number Parsed</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>off</td><td>off</td><td>1</td><td>1</td>
                  </tr>
                  <tr>
                     <td>on</td><td>on</td><td>2</td><td>2</td>
                  </tr>
                  <tr>
                     <td>off</td><td>off</td><td>1993</td><td>1993</td>
                  </tr>
                  <tr>
                     <td>off</td><td>off</td><td>2015</td><td>2015</td>
                  </tr>
                  <tr>
                     <td>on</td><td>on</td><td>100</td><td>100</td>
                  </tr>
               </tbody>
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
               This demo shows how to customize a data parser using the customBoolParser and customRomanParser functions.
            </p>
        </div>
    </div>
</body>
</html>
